<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="仪表识别 Example" />
<title>仪表识别 Example</title>
  <link rel="stylesheet" type="text/css" href="css/imgareaselect-animated.css" />
  <link rel="stylesheet" type="text/css" href="css/index.css" />
  <link rel="stylesheet" href="layui/css/layui.css?t=1545041465480"  media="all">
  
  <script src="js/jquery-1.10.2.js"></script>
  <script src="layui/layui.all.js"></script>
  <script src="js/jquery.imgareaselect.pack.js"></script>
  <script src="js/jquery.imgareaselect.min.js"></script>
 </head>
 <body>
<script type="text/javascript">
	function preview(img, selection) {
	    if (!selection.width || !selection.height)
	        return;
	    var scaleX = 100 / selection.width;
	    var scaleY = 100 / selection.height;
	 
	    parent.$('#x1').val(selection.x1);
	    parent.$('#y1').val(selection.y1);
	    //$('#x2').val(selection.x2);
	    //$('#y2').val(selection.y2);
	    parent.$('#w').val(selection.width);
	    parent.$('#h').val(selection.height);    
		
	    //画小图
	    var can= parent.$('#myCan');
			var ctx=can.get(0).getContext('2d');
			//擦除（clearRect方法）
			ctx.clearRect(0, 0, can.width(), can.height());
	    var newX=parent.$("#x1").val();
	    var newY=parent.$("#y1").val();
	    var newW=parent.$("#w").val();
	    var newH=parent.$("#h").val();
	    var img=document.getElementById("photo");
	    ctx.drawImage(img, newX, newY, newW, newH, 0, 0, newW, newH);
	}
	$(function () {
	    $('#photo').imgAreaSelect({ handles: true,  fadeSpeed: 200, onSelectChange: preview });
	});
</script>

	<form id="uploadImgForm" enctype="multipart/form-data">
		<input type="file" class="layui-btn layui-btn-normal" onchange="uploadImg()" name="fileName" accept="image/*" />
	</form>
	<div>
		<img id="photo" src="" />
	</div>
<script type="application/javascript">
	var urlBase = "http://47.97.117.156:5200";
	function uploadImg(){  
		var fd = new FormData(document.getElementById("uploadImgForm"));
		fd.append("path", "orc/yuantu");
		fd.append("fileFormat", "img");
		fd.append("fileSize", "10001");
		$.ajax({
			type : "POST",
			url : urlBase + "/api/test/file/v_1/fileUpload",
			data : fd,//FormId
			processData: false,  // 告诉jQuery不要去处理发送的数据
			contentType: false,   // 告诉jQuery不要去设置Content-Type请求头
			error : function(request) {
			},
			success : function(data) {
				$("#photo").attr("src",data.result.filePath);
				parent.$("#fileBasePath").val(data.result.fileBasePath);
			}
		}); 
	}
</script>
</body>
</html>